
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目汇报封面</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        .bg-gradient-blue {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        }
        .logo-container {
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
    </style>
</head>
<body class="bg-gradient-blue min-h-screen flex items-center justify-center p-8">
    <div class="max-w-4xl w-full text-center space-y-8">
        <!-- 公司标志 -->
        <div class="logo-container animate-fade-in-up opacity-0" style="animation-delay: 0.2s">
            <img src="https://via.placeholder.com/200x60.png?text=Company+Logo" 
                 alt="公司标志" 
                 class="mx-auto mb-12 h-16 opacity-90">
        </div>

        <!-- 主标题区 -->
        <div class="space-y-6">
            <h1 class="text-6xl font-bold text-white animate-fade-in-up opacity-0" 
                style="animation-delay: 0.4s">
                智能物流优化系统
            </h1>
            
            <h2 class="text-2xl text-blue-100 font-medium animate-fade-in-up opacity-0"
                style="animation-delay: 0.6s">
                基于AI的仓储配送解决方案
            </h2>
        </div>

        <!-- 汇报人信息 -->
        <div class="mt-16 space-y-4 animate-fade-in-up opacity-0" 
             style="animation-delay: 0.8s">
            <div class="flex items-center justify-center space-x-4 text-blue-100">
                <i class="fas fa-user-tie text-2xl"></i>
                <p class="text-xl">汇报人：张三 | 项目经理</p>
            </div>
            
            <div class="flex items-center justify-center space-x-4 text-blue-100">
                <i class="fas fa-calendar-alt text-xl"></i>
                <p class="text-lg">2023年10月15日</p>
            </div>
        </div>

        <!-- 装饰元素 -->
        <div class="mt-20 animate-fade-in-up opacity-0" 
             style="animation-delay: 1s">
            <div class="h-1 w-24 bg-white/30 mx-auto rounded-full"></div>
        </div>
    </div>

    <script>
        // 初始化动画序列
        document.addEventListener('DOMContentLoaded', () => {
            const animatedElements = document.querySelectorAll('.animate-fade-in-up');
            animatedElements.forEach(el => {
                el.style.opacity = 0;
                const delay = el.style.animationDelay || '0s';
                setTimeout(() => {
                    el.style.opacity = 1;
                }, parseFloat(delay) * 1000);
            });
        });
    </script>
</body>
</html>
